<template>
  <div class="app-container gameManager-platform">
    <custom-dialog
      :visible="dialogVisible"
      v-if="dialogVisible && dialogName === 'custom-dialog'"
      returnButtonName="返回"
      :callback="closeDialog"
    >
      <div slot="title">&nbsp;</div>
      <sub-game-tab-list :rowData="dialogProps"/>
    </custom-dialog>

    <el-table
      :data="tableData"
      v-loading="loading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
      v-if="!dialogVisible|| showConfig"
    >
      <el-table-column label="平台类型" align="center">
        <template slot-scope="{row}">{{row.name}}</template>
      </el-table-column>
      <el-table-column label="上线时间" align="center">
        <template slot-scope="{row}">{{row.createDate | toTime}}</template>
      </el-table-column>
      <el-table-column label="平台费" align="center" prop="fee">
        <template slot-scope="{row}">{{row.fee+'%'}}</template>
      </el-table-column>
      <el-table-column label="所属分类" align="center" prop="navGroup">
         <template slot-scope="{row}">{{getType(row.navGroup)}}</template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button
            type="text"
            @click.native="openDialogWrapper(row)"
            v-if="showGameOpt(row)">游戏配置</el-button>
          <el-button type="text" @click.native="openAngleConfigDialogWrapper(row)">上线配置</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogVisible"
      v-if="dialogVisible && dialogName === 'maintain-view'"
      :before-close="() => {dialogVisible = false}"
    >
      <maintain-view
        style="max-height:60vh; overflow: auto"
        :platform-id="dialogProps.maintenId"
        :maintain-start-time="dialogProps.startDate"
        :maintain-end-time="dialogProps.endDate"
        :maintain-reason="dialogProps.remark"
        @on-success="dialogVisible = false;doGet({action: 'getGrid'})"
        v-if="dialogName === 'maintain-view'"
      />
    </el-dialog>
    <!--游戏上线配置弹框-->
    <el-dialog
      :title="dialogProps.name+'游戏入口配置'"
      width="850px"
      :visible.sync="showConfig"
      :row="dialogProps.row"
      v-if="showConfig && dialogName === 'angle-config'"
      :before-close="() => {dialogVisible = false}"
    >
      <sub-game-angle-config

        :row="row"
        v-model="dialogVisible"
      />
    </el-dialog>
  </div>
</template>

<script>
import { form, grid, dialog } from '@/build';
import {
  gameManagerListApi as listApi,
  gameSettingListApi,
} from '@/services/api/game';

import MaintainView from './maintainView';
import SubGameTabList from './subGameTabList';
import SubGameAngleConfig from './subGameAngleConfig';
import { gameManageRoleType } from '@/router/gameRoutes';

export default {
  name: 'game-manager',

  mixins: [form, grid, dialog],

  components: {
    MaintainView,
    SubGameTabList,
    SubGameAngleConfig,
  },

  data() {
    return {
      row: {},
      showConfig: false,
      gameTypeList: [
        { title: '体育', value: 'sport' },
        { title: '真人', value: 'real' },
        { title: '彩票', value: 'lottery' },
        { title: '棋牌', value: 'poker' },
        { title: '电子', value: 'digital' },
      ],
      gameManageRoleType,
      tableData: [],
      configData: [],
      nowTime: new Date(),
      gameArray: [consts.PT, consts.AG_GAME, consts.EBET_GAME, consts.PP_GAME],
      form: {
        transfer: {},
        transferOpen: [],
        inMin: 0,
        inMax: 0,
        inTimes: 0,
        outMin: 0,
        outMax: 0,
        outTimes: 0,
      },
      channelId: '',
    };
  },

  computed: {
  },
  methods: {
    getType(value) {
      if (value) {
        return _.find(this.gameTypeList, { value }).title;
      }
      return '--';
    },
    openDialogWrapper(row) {
      this.channelId = row.channelId;
      this.openDialog({ props: row, dialogName: 'custom-dialog' });
    },
    openAngleConfigDialogWrapper(row) {
      this.showConfig = true;
      this.row = row;
      this.openDialog({ props: row, dialogName: 'angle-config' });
    },
    showGameOpt(row) {
      if (this.roleCheck(gameManageRoleType.gameConfig)) {
        if (row.channelId === consts.PT || row.maintenId === consts.AG_GAME || row.maintenId === consts.EBET_GAME || row.maintenId === consts.PP_GAME) {
          return true;
        }
        return false;
      }
      return false;
    },
  },
  mounted() {
    // tab页记录访问日志
    this.$store.dispatch(types.SAVE_OPERATION_LOG, {
      content: _.getContent(this.$route, '游戏管理', true),
    });
    this.bindGet(gameSettingListApi, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      // callback: ([result, data]) => {
      //   console.log(JSON.stringify(data));
      // },
      format: (data) => {
        data = _.filter(data, item => [9].indexOf(item.channelId) <= -1);
        _.forEach(data, (element) => {
          if (!_.isUndefined(element.navGroup)) return;
          element.navGroup = _.find(this.gameTypeList, { value: element.navGroup }).title;
        });
        return data;
      },
    });
    this.getAll();
  },
};
</script>
<style lang="scss">
  .gameManager-platform .custom-dialog{
    top: 0!important;
  }
  .gameManager-platform .el-dialog__body{
    padding:10px 20px;
  }
</style>
